<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-Y home-page" @scroll="scroll" :style="{height:heightValue+'px'}">
			<navBar title="趣乐盒" v-if="showNav"></navBar>
			<swiper class="swiper home-swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000"
				:duration="1000" indicator-color="rgba(0,0,0,0.16)" indicator-active-color="#fff">
				<!-- swiperList -->
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<img :src="item" alt="" class="swiper-item-img-url" />
					</view>
				</swiper-item>
			</swiper>

			<view class="home-task-box ">
				<img src="https://www.jk334.cn/img/my-task.png" alt="" class="home-task-box-item"
					@click="jump('/pages/Task/MyTask')" />
				<img src="https://www.jk334.cn/img/task-hall.png" alt="" class="home-task-box-item"
					@click="jump('/pages/SignIn/SignIn')" />
				<view>
				</view>
			</view>

			<view class="home-task-line"></view>

			<view class="home-activity">
				<view class="home-activity-title">
					热门活动
				</view>
				<view @click="jump('/pages/Activity/Activity')">
					查看更多
					<uni-icons type="right" size="12"></uni-icons>
				</view>
			</view>

			<view class="popular-games">
				<!-- @click="jump('/pages/Activity/ActivityDetails')" -->
				<view class="games-item" v-for="item in activityList" :key="item"
					@click="jump('/pages/Activity/Activity')">
					<img :src="item.url" alt="" class="games-img" />
					<!-- <view class="games-img">
					</view> -->
					<view class="games-item-text">
						{{item.title}}
					</view>
				</view>
			</view>

			<view class="home-task-list">

				<view class="home-task-list-title">
					任务榜单
				</view>
				<taskItem v-for="(item,index) in taskList" :key="item" :subItem="item"
					@setStatus="setStatus(item,index)">
				</taskItem>
				<uni-load-more :status="status" iconType="circle" :contentText="contentText"></uni-load-more>
			</view>
		</scroll-view>
		<!-- 获取验证码，变相的登录接口 -->
		<u-popup :show="show" mode="center" safeAreaInsetBottom="false" round="20">
			<view class="verify-popup">
				<u-toast ref="uToast" />
				<view class="verify-nav">
					请输入手机号验证
				</view>
				<view class="verify-popup-main">
					<view class="verify-main-item">
						<view :style="{fontSize:'28rpx'}">
							手机号
						</view>
						<view class="verify-item-input">
							<text :style="{marginRight:'10rpx'}">+86</text>
							<u-input v-model="phone" maxlength="11" placeholder="请输入手机号" type="number" border="false"
								placeholder-style="color:#999;font-size:12px" />
						</view>
					</view>
					<view class="test-verify" @click="testVerify()">
						立即验证
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<!-- 首页 -->
<script>
	import navBar from '@/components/navBar/navBar.vue';
	import taskItem from '@/components/taskItem/taskItem.vue'
	import {
		myRequest
	} from '@/utiles/api.js'
	import {
		getHeight,
	} from '@/utiles/utils.js';
	import {
		getStore,
		useAppStore
	} from '@/store/store.js'
	export default {
		components: {
			navBar,
			taskItem
		},
		data() {
			return {
				heightValue: 0,
				phone: '', //验证是否注册的手机号
				status: 'noMore', //noMore，more，loading
				show: false,
				showNav: true,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				Device_Sid: '',
				taskList: [],
				userInfo: {},
				activityList: [{
					url: 'https://www.jk334.cn/img/activety-01.png',
					title: '英雄联盟手游礼包领取攻略'
				}, {
					url: 'https://www.jk334.cn/img/activety-02.png',
					title: '王者荣耀限时礼包抱抱系类'
				}, {
					url: 'https://www.jk334.cn/img/activety-03.png',
					title: '组队必备武器推荐霸王枪'
				}],
				swiperList: ['https://www.jk334.cn/img/swiper-01.png', 'https://www.jk334.cn/img/swiper-02.png']
			}
		},
		onShow() {
			const windowHeight = getHeight().windowHeight //100vh
			const statusBarHeight = getHeight().statusBarHeight //tabBar高度
			const navBareight = getHeight().navBareight //头部高度
			this.heightValue = windowHeight + statusBarHeight + navBareight

			if (useAppStore.verifyShow) {
				this.show = false
				uni.showTabBar()
			} else {
				this.show = true
				uni.hideTabBar()
				this.heightValue = windowHeight + statusBarHeight + navBareight
			}
		},
		methods: {
			scroll({
				detail
			}) {
				if (detail.scrollTop > 30) {
					this.showNav = false
				} else {
					this.showNav = true
				}
			},
			jump(data) {
				if (useAppStore.verifyShow) {
					uni.navigateTo({
						url: data
					});
				} else {
					this.show = true
					const windowHeight = getHeight().windowHeight //100vh
					const navBareight = getHeight().navBareight //头部高度
					this.heightValue = windowHeight
					uni.hideTabBar()
				}
			},
			async testVerify() {
				const {
					phone
				} = this || {}
				if (!phone) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入手机号'
					})
					return
				}
				this.$refs.uToast.show({
					type: 'loading',
					message: "加载中",
					duration: '60000',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				})
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'Applet/RegisterUser',
					method: 'POST',
					contentType: 'application/json',
					data: {
						phone: phone
					}
				})
				this.$refs.uToast.clearTimer()
				if (success) {
					const {
						okStatus,
					} = data || {}
					uni.setStorageSync('phone', phone)
					if (okStatus == 888) {
						this.getTaskList()
						this.show = false
						getStore('verifyShow', true)
						uni.showTabBar()
						let storageUserInfo = uni.getStorageSync('userInfo')
						if (!storageUserInfo) {
							this.getWxUserInfo()
						}
					}
					if (okStatus == 7) return this.show = false
					if (okStatus == 1 || okStatus == 2) {
						if (okStatus == 1) {
							uni.navigateTo({
								url: '/pages/Signup/SignVerify?smsShow=true'
							});

						} else if (okStatus == 2) {
							uni.navigateTo({
								url: '/pages/Signup/SignVerify?smsShow=false'
							});
						}
						return
					}
					if (okStatus == 3 || okStatus == 8 || okStatus == 12) return this.$refs.uToast.show({
						type: 'error',
						message: '注册失败,请换号重试'
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: message,
					})
				}
			},
			async getTaskList() {
				const {
					phone
				} = this || {}
				if (!phone) return
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'Applet/GetApps',
					method: 'POST',
					contentType: 'application/json',
					data: {
						muid: phone
					}
				})
				if (success) {
					this.taskList = [...data]
				} else {
					this.$refs.uToast.show({
						type: 'loading',
						message: message,
						duration: '2000',
					})
				}
			},
			async setStatus(item, index) {
				const {
					phone,
					taskList
				} = this || {}
				if (!item.appId) return
				let {
					success,
					data,
					message
				} = await myRequest({
					prefix: 'https://www.jk334.cn/api/',
					url: 'Applet/ReceiveBenefits',
					method: 'POST',
					contentType: 'application/json',
					data: {
						muid: phone,
						appId: item.appId
					}
				})
				if (success) {
					let list = [...taskList]
					list[index].status = 1
					this.taskList = [...list]
					this.$refs.uToast.show({
						type: 'success',
						message: message,
						duration: '2000',
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: message,
						duration: '2000',
					})
				}
			},

			getWxUserInfo() {
				var _this = this
				uni.hideTabBar()
				wx.showModal({
					title: '温馨提示',
					content: '亲，授权微信登录后才能正常使用小程序功能',
					success(res) {
						//如果用户点击了确定按钮
						if (res.confirm) {
							wx.getUserProfile({
								desc: '获取你的昵称、头像、地区及性别',
								success: res => {
									const {
										userInfo
									} = res || {}
									if (JSON.stringify(userInfo) !== '{}') {
										uni.setStorageSync('userInfo', JSON.stringify(userInfo))
									}
									uni.showTabBar()
								},
								fail: res => {
									//拒绝授权
									wx.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 2000
									});
									uni.showTabBar()
									return;
								}
							});
						} else if (res.cancel) {
							//如果用户点击了取消按钮
							wx.showToast({
								title: '您拒绝了请求,不能正常使用小程序',
								icon: 'error',
								duration: 2000
							});
							return;
						}
					}
				});
				uni.showTabBar()
			},
			close() {
				this.show = false
				const windowHeight = getHeight().windowHeight //100vh
				this.heightValue = windowHeight
				uni.showTabBar()
			},
		}
	}
</script>

<style scoped lang="scss">
	.home-page {
		background-image: url("https://www.jk334.cn/img/home-bg.png");
		background-size: 100% 332rpx;
		background-repeat: no-repeat;
		height: 100vh;
	}

	.home-swiper {
		margin: 40rpx 30rpx;
		height: 320rpx;
		border-radius: 16rpx;

		.swiper-item {
			display: block;
			height: 320rpx;
			line-height: 320rpx;
			text-align: center;

			.swiper-item-img-url {
				width: 100%;
				height: 100%;
			}
		}
	}

	.home-task-box {
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;

		.home-task-box-item {
			width: 336rpx;
			height: 180rpx;
			border-radius: 10rpx;
			background: pink;
			box-sizing: border-box;
		}
	}

	.home-task-line {
		margin: 40rpx 30rpx;
		height: 1px;
		background: #F2F2F2;
	}

	.home-activity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #BFBFBF;

		.home-activity-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #323232;
		}
	}

	.popular-games {
		margin: 30rpx 30rpx 0rpx 30rpx;
		padding-bottom: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.games-item {
			width: 208rpx;

			.games-img {
				width: 208rpx;
				height: 208rpx;
				border-radius: 8rpx;
				// background: #999;
			}

			.games-item-text {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #323232;
				line-height: 32rpx;
			}
		}
	}

	.home-task-list {
		padding: 40rpx 30rpx;
		background: #F5F5F5;

		.home-task-list-title {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #323232;
		}
	}

	.verify-popup {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 34rpx;

		.verify-nav {
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #FDF6EC 100%);
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #FF8204;
			border-radius: 20rpx 20rpx 0 0;
		}

		.verify-popup-main {
			display: flex;
			flex-direction: column;
			align-items: center;

			.verify-main-item {
				margin-top: 52rpx;
				width: 488rpx;
				font-family: PingFang SC, PingFang SC;
				color: #323232;
				box-sizing: border-box;


				.verify-item-input {
					margin-top: 12rpx;
					display: flex;
					align-items: center;
					height: 80rpx;
					background: #F5F5F5;
					border-radius: 16rpx;
					padding: 20rpx 24rpx;
					box-sizing: border-box;
					font-size: 24rpx;

					.uni-input {
						flex: 1;
					}

					.uni-input::placeholder {
						color: #999;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
					}

					.verify-code {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}

			.test-verify {
				margin-top: 100rpx;
				width: 320rpx;
				height: 80rpx;
				background: #FFCD2C;
				border-radius: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #393319;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>